<section class="push-bottom-xl">
  <h1 class="push-bottom-sm mat-h1">Functions</h1>

  <p class="tc-td-secondary push-bottom-md">
    Helpful functions for common interactions.
  </p>
</section>

<mat-card class="push-bottom-lg mat-elevation-z0 push-none">
  <mat-card-header
    ><mat-card-title>Clipboard</mat-card-title>
    <mat-card-subtitle class="push-bottom-none"
      >Clipboard function.</mat-card-subtitle
    ></mat-card-header
  >
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs dynamicHeight>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3 class="mat-title">copyToClipboard</h3>
        <p>
          Assign a text value to the system clipboard. Note: Due to browser
          security restrictions, the copy will only succeed if this method is
          invoked as a result of a user action (eg. user button click).
        </p>
        <form>
          <div layout="row">
            <mat-form-field flex>
              <textarea
                matInput
                [(ngModel)]="copyText"
                placeholder="Text to be copied"
                rows="1"
                name="copyTextinput"
              ></textarea>
            </mat-form-field>
          </div>
        </form>
        <button mat-raised-button color="primary" (click)="doCopyToClipboard()">
          Copy to clipboard
        </button>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <p>HTML:</p>
        <td-highlight codeLang="html">
          {{ clipboardCodeHtml }}
        </td-highlight>
        <p>Typescript:</p>
        <td-highlight codeLang="typescript">
          {{ clipboardCodeTypescript }}
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
<mat-card class="push-bottom-lg mat-elevation-z0 push-none">
  <mat-card-header
    ><mat-card-title>Convert</mat-card-title>
    <mat-card-subtitle class="push-bottom-none"
      >Type conversion functions.</mat-card-subtitle
    ></mat-card-header
  >
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs dynamicHeight>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3 class="mat-title">convertCSVToJSON</h3>
        <p>
          Conversion function that takes a CSV representation of objects and
          converts them to JSON. The first row in the input must be the object
          keys. Custom key separator and line separator can be specified. Space
          indentation size for output JSON can be specified.
        </p>
        <h4>Input CSV:</h4>
        <td-highlight [content]="csv"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doConvertCSVToJSON()"
          class="push-top-sm"
        >
          Convert CSV
        </button>
        <h4>Output JSON:</h4>
        <td-highlight [content]="jsonOutput"></td-highlight>
        <h3 class="mat-title pad-top-xl">convertObjectsToCSV</h3>
        <p>
          Conversion function that takes an array of objects and converts them
          to CSV format. Custom key and line separators can be specified.
        </p>
        <h4>Input Objects:</h4>
        <td-highlight [content]="objectsString"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doConvertObjectsToCSV()"
          class="push-top-sm"
        >
          Convert objects
        </button>
        <h4>Output CSV:</h4>
        <td-highlight [content]="csvOutput"></td-highlight>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <p>HTML:</p>
        <td-highlight codeLang="html">
          {{ convertCodeHtml }}
        </td-highlight>
        <p>Typescript:</p>
        <td-highlight codeLang="typescript">
          {{ convertCodeTypescript }}
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
<mat-card class="push-bottom-lg mat-elevation-z0 push-none">
  <mat-card-header
    ><mat-card-title>Download</mat-card-title>
    <mat-card-subtitle class="push-bottom-none"
      >Content download functions.</mat-card-subtitle
    ></mat-card-header
  >
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs dynamicHeight>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3 class="mat-title">downloadCSV</h3>
        <p>
          Download CSV content to the specified file with .csv extension
          appended to the provided base file name.
        </p>
        <h4>CSV:</h4>
        <td-highlight [content]="csv"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doDownloadCSV()"
          class="push-top-sm"
        >
          Download CSV
        </button>
        <h3 class="mat-title pad-top-lg">downloadJSON</h3>
        <p>
          Download JSON content to the specified file with .json extension
          appended to the provided base file name.
        </p>
        <h4>JSON:</h4>
        <td-highlight [content]="json"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doDownloadJSON()"
          class="push-top-sm"
        >
          Download JSON
        </button>
        <h3 class="mat-title pad-top-lg">downloadObjectsToCSV</h3>
        <p>
          Convert objects to CSV format and download to file with .csv extension
          appended to the provided base file name. Custom key separator and line
          separator can be specified.
        </p>
        <h4>Objects:</h4>
        <td-highlight [content]="objectsString"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doDownloadObjectsToCSV()"
          class="push-top-sm"
        >
          Download to CSV
        </button>
        <h3 class="mat-title pad-top-lg">downloadObjectsToJSON</h3>
        <p>
          Convert objects to JSON format and download to file with .json
          extension appended to the provided base file name.
        </p>
        <h4>Objects:</h4>
        <td-highlight [content]="objectsString"></td-highlight>
        <button
          mat-raised-button
          color="primary"
          (click)="doDownloadObjectsToJSON()"
          class="push-top-sm"
        >
          Download to JSON
        </button>
        <h3 class="mat-title pad-top-lg">download</h3>
        <p>
          Download string content to the specified file with desired mime type.
        </p>
        <form>
          <div layout="column">
            <mat-form-field flex>
              <input
                matInput
                [(ngModel)]="fileName"
                placeholder="File name"
                rows="1"
                name="fileNameInput"
              />
            </mat-form-field>
            <mat-form-field flex>
              <textarea
                matInput
                [(ngModel)]="fileContent"
                placeholder="File content"
                rows="1"
                name="fileContentInput"
              ></textarea>
            </mat-form-field>
            <mat-form-field flex>
              <input
                matInput
                [(ngModel)]="mimeType"
                placeholder="Mime type"
                rows="1"
                name="mimeTypeInput"
              />
            </mat-form-field>
          </div>
        </form>
        <button
          mat-raised-button
          color="primary"
          (click)="doDownloadFile()"
          class="push-sm"
        >
          Download
        </button>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <p>HTML:</p>
        <td-highlight codeLang="html">
          {{ downloadCodeHtml }}
        </td-highlight>
        <p>Typescript:</p>
        <td-highlight codeLang="typescript">
          {{ downloadCodeTypescript }}
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
<mat-card class="push-bottom-lg mat-elevation-z0 push-none">
  <mat-card-header
    ><mat-card-title>File</mat-card-title>
    <mat-card-subtitle class="push-bottom-none"
      >File handling functions.</mat-card-subtitle
    ></mat-card-header
  >
  <mat-card-content>
    <mat-tab-group mat-stretch-tabs dynamicHeight>
      <mat-tab>
        <ng-template matTabLabel>Demo</ng-template>
        <h3 class="mat-title">readFile</h3>
        <p>
          Read file as UTF-8 text. Return string contents on read completion.
        </p>
        <button mat-raised-button color="primary" (click)="fileInput.click()">
          Choose file
          <input
            #fileInput
            type="file"
            (change)="doReadFile($event)"
            style="display: none"
          />
        </button>
        <h4>File Content:</h4>
        <td-highlight
          class="filecontentmaxheight"
          [content]="readFileContent"
        ></td-highlight>
      </mat-tab>
      <mat-tab>
        <ng-template matTabLabel>Code</ng-template>
        <p>HTML</p>
        <td-highlight codeLang="html">
          {{ fileCodeHtml }}
        </td-highlight>
        <p>Typescript</p>
        <td-highlight codeLang="typescript">
          {{ fileCodeTypescript }}
        </td-highlight>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
